<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <input type="button" value="查看用户详情" @click="loadData">
  <div v-if="user">
    <h1>用户详情</h1>
    <div>
      <p>id: {{user.id}}</p>
      <p>姓名: {{user.name}}</p>
      <p>年龄: {{user.age}}</p>
      <p>邮箱: {{user.email}}</p>
    </div>
  </div>
  <h1 v-else>暂无用户信息</h1>
</div>


<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
  // 在引入 axios.min.js之后，在页面中有了一个 axios的对象
  // 使用axios对象可以发送 ajax 请求
  /*
  发送get请求的语法：
    axios
      .get( 请求的url(如果有参数，是可以拼接到url后面) )
      .then(function(res){})  // 请求成功之后做处理的地方
      .catch(function(err){}) // 请求失败之后做处理的地方
   */

  var vm = new Vue({
    el: '#app',
    data: {
      user: null
    },
    methods: {
      loadData: function () {
        var that =this;
        // 要传入的参数
        var paramObj={"id":1,age:20}
        // 要请求的地址
        var url = "http://localhost:63342/day02/data/user.json";
        // 发送请求
        axios
        .get( url,  {params: paramObj}   ) // 指定请求的参数,  {params: 表示参数的对象 }
        // 请求成功时
        .then(function (res) {
          console.log(res.data)
          // 把响应的用户信息赋值给 user
          that.user = res.data;
        })
        // 请求失败时
        .catch(function (err) {
          console.log(err)
        })

      }
    }
  });
</script>
</body>
</html>
